<template>
	<div class="headerto">
		<i class="el-icon-refresh" @click="Refresh">刷新</i>
		<el-menu :default-active="$route.name" :router="true" class="el-menu-demo" mode="horizontal" @select="handleSelect"
		 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
			<!-- 只有一级菜单 -->
			<el-menu-item :index="item.path" v-for="(item,index) in permsList" :key="index" v-if="item.childrens">{{item.label}}</el-menu-item>
			<!-- 有二级菜单 -->
			<el-submenu v-for="(item,index) in permsList" :key="index" v-else>
				<template slot="title">
					<i class="iconfont icon-shebeiguanli1" :class="item.icon"></i>
					<span slot="title">{{item.label}}</span>
				</template>
				<el-menu-item-group style="overflow: hidden;" v-for="(item2,index2) in item.childrens" :key="index2">
					<el-menu-item :index="item2.path">{{item2.label}}</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
		</el-menu>

		<div class="right">
			
			<el-dropdown @command="handleCommand" trigger="click">
				<span class="el-dropdown-link" v-if="userInfo">
					{{userInfo.userName||userInfo.loginName}}
					<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<span class="el-dropdown-link" style="color: white;" v-else="">
					未登录
					<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="b">退出</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapGetters
	} from 'vuex';
	//非父子组件传值
	import bus from '../../../static/js/bus.js';
	export default {
		name: 'headerto',
		computed: {
			...mapGetters(['userInfo', 'api']) //获取
		},
		data() {
			return {
				permsList: [{
						icon: 'el-icon-tickets',
						label: '设备',
						path: 'equipment', //跳转的路径
						childrens: []
					},
					{
						icon: 'el-icon-tickets',
						label: '用户',
						path: 'user',
						childrens: []
					},
					{
						icon: 'el-icon-tickets',
						label: '设置',
						path: 'setUp',
						childrens: []
					}
				]
			};
		},
		mounted() {},
		methods: {
			...mapActions(['set_LogOut', 'delAllViews']),
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			//退出登录
			handleCommand(e) {
				let that = this;
				if (e == 'b') {
					this.$confirm('是否退出此账号?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						})
						.then(() => {
							that.$router.push({
								name: 'login',
								path: '/login'
							});
							that.logout()
							that.set_LogOut('')
							//清除tagsView
							that.delAllViews()
						})
						.catch(() => {});
				}
			},
			//登出接口
			logout() {
				let that = this;
				that.GLOBAL.doPost(that.api.GLOBAL_user_logout, {}, function(res) {});
			},
			//刷新
			Refresh() {
				let that = this
				bus.$emit('refreshPage', true)
			}
		}
	};
</script>

<style scoped="scoped" lang="scss">
	.headerto {
		display: flex;
		justify-content: space-between;background-color:#545c64;color:white;
		.el-menu-demo{height: 100%;width: 80%;display: flex;justify-content: space-around;}
		.right{width: 10%;text-align: center;}
		.el-icon-refresh{line-height: 60px;width: 10%;text-align: center;}
		.el-dropdown-link,.el-icon-refresh {cursor: pointer;}
		
	}
</style>
